<template>
  <header class="header">
    <div class="header_main">
      <router-link class="logo" to="/">
        <img src="../assets/images/logo.png"/>
      </router-link>
      <nav class="nav">
        <ul class="list">
          <li v-for="(item, index) in navigation" :key="index">
            <router-link 
              v-if="item.method === 'router-link'" 
              :to="item.path" 
              :class="{
                active: 
                  $route.path === item.path || 
                  (
                    $route.path !== '/' && 
                    item.path !== '/' && 
                    $route.path.indexOf(item.path) >= 0
                  ) ? true : false
              }"
            >{{item.title}}</router-link>
            <a v-else :href="item.path">{{item.title}}</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <main class="main">
    <div class="content">
      <router-view v-if="status"/>
      <div class="container" v-else>
        <div class="fixed">
          <!-- <div :class="['roll', {
            mobileRoll: isMobile
          }]"> -->
            <div :class="['sidebar', {
              mobileSidebar: isMobile,
              show: isShowNavigation
            }]" @click="() => isShowNavigation = false">
              <div class="sidebar-box" @click.stop>
                <div class="sidebar-roll">
                  <div class="sidebar-roll-mobile">
                    <ul v-for="(item, index) in sidebar" :key="index">
                      <li class="link" v-if="!item.children || item.children.length === 0">
                        <router-link :to="item.path" :class="{active: $route.path === item.path, title: item.method === 'title'}">{{item.title}}</router-link>
                      </li>
                      <li class="grouping" v-else>
                        <h6>{{item.title}}</h6>
                        <ul>
                          <li class="link" v-for="(_item_, _index_) in item.children" :key="_index_">
                            <router-link :to="_item_.path" :class="{active: $route.path === _item_.path}">{{_item_.title}}</router-link>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="page-box">
              <router-view/>
            </div>
          <!-- </div> -->
        </div>
      </div>
    </div>
  </main>
  <footer class="footer">©{{new Date().getUTCFullYear()}} Team Crab-UI. All rights reserved.</footer>
  <i v-if="isMobile && !status" class="layout cb-icon-app" @click="isShowNavigation = true"></i>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, watch, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import navigation from '../assets/json/navigation.json';
export default defineComponent({
  setup() {
    /** 获取当前路由信息 */
    const route = useRoute();
    /** 切换导航布局是否需要导航 */
    const status: Ref<boolean> = ref(false);
    /** 侧边栏导航 */
    const sidebar: Ref<any> = ref([]);
    /** 是否为 768 分辨率 */
    const isMobile: Ref<boolean> = ref(false);
    /** 是否显示导航 */
    const isShowNavigation: Ref<boolean> = ref(false);
    /** 监听路由 - 推断当前导航是否需要显示侧边栏导航布局 */
    watch(() => route.path, (val: string): void => {
      const index: number = navigation.map(item => 
        val === item.path || 
        (
          val !== '/' && 
          item.path !== '/' && 
          val.indexOf(item.path) >= 0
        ) ? true : false
      ).findIndex(item => item);
      if (navigation[index].children && navigation[index].children.length > 0) {
        sidebar.value = navigation[index].children;
      } else {
        sidebar.value = [];
      }
      status.value = !(navigation[index].children && navigation[index].children.length > 0);
      isShowNavigation.value = false;
    }, {
      immediate: true
    })
    /** 判断浏览器显示比例 */
    const isClientWidth = () => {
      isMobile.value = document.body.clientWidth <= 768;
      isShowNavigation.value = false;
    };
    /** 浏览器初始化执行 */
    onMounted(() => {
      isClientWidth();
      window.addEventListener('resize', () => isClientWidth());
    })
    return {
      navigation,
      sidebar,
      status,
      isMobile,
      isShowNavigation,
    }
  }
})
</script>

<style lang="scss" scoped>
  .header{
    box-shadow: 0 0 2px 2px rgba($color: #000000, $alpha: .03);
    position: relative;
    z-index: 1;
    &_main{
      max-width: 1200px;
      margin: auto;
      padding: 10px 0;
      display: flex;
      position: relative;
      .logo{
        display: block;
        height: 40px;
        img{
          height: 100%;
        }
      }
      .nav{
        flex: 1;
        display: flex;
        padding: 12px 0;
        font-size: 0;
        .list{
          display: flex;
          li{
            list-style: none;
            margin: 0 15px;
            a{
              text-decoration: none;
              font-size: 16px;
              line-height: 1;
              color: var(--primary-color-7);
            }
            a:hover{
              color: var(--primary-color);
            }
            a.active{
              position: relative;
              color: var(--primary-color);
            }
            a.active:after{
              content: '';
              display: block;
              width: 90%;
              height: 4px;
              background: var(--primary-color-8);
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: -10px;
              border-radius: 4px;
            }
          }
          
        }
      }
      .nav:before{
        content: '';
        flex: 1;
      }
    }
  }
  .main{
    flex: 1;
    .content{
      height: 100%;
      margin: auto;
      .container{
        height: 100%;
        position: relative;
        .fixed{
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          overflow: auto;
          .sidebar{
            width: 240px;
            border-right: 1px solid var(--border-primary-color-3);
            border-left: 1px solid var(--border-primary-color-3);
            position: fixed;
            top: 60px;
            left: calc((100% - (100% - (100% - 1200px))) /2);
            bottom: calc(12px * 2.5);
            box-sizing: border-box;
            padding: 10px 0;
            overflow: hidden;
            .sidebar-box{
              width: 260px;
              height: 100%;
              overflow: auto;
              .sidebar-roll{
                width: 240px;
                ul{
                  padding-top: 5px;
                  li{
                    list-style: none;
                    padding: 5px 15px;
                  }
                  .grouping{
                    h6{
                      font-size: 16px;
                      line-height: 2;
                      color: var(--text-primary-color);
                    }
                  }
                  .link{
                    a{
                      font-size: 14px;
                      line-height: 1.68;
                      text-decoration: none;
                      color: var(--text-primary-color-6);
                    }
                    a.active{
                      color: var(--primary-color);
                    }
                    a:hover{
                      color: var(--primary-color-6);
                    }
                    a.title{
                      font-size: 16px;
                      font-weight: bold;
                    }
                  }
                }
              }
            }
          }
          .page-box{
            width: calc(100% - (100% - 1200px) - 240px);
            padding: 15px 0 15px calc((100% - 1200px) / 2 + 240px + 15px);
          }
        }
      }
    }
  }
  .footer{
    background: var(--primary-color-1);
    color: var(--text-primary-color-5);
    font-size: 12px;
    text-align: center;
    line-height: 2.5;
  }
  @media (max-width: 1230px) {
    .header_main{
      padding: 10px 30px;
    } 
    .content{
      width: auto !important;
      .container{
        .fixed{
          .sidebar{
            left: 0 !important;
          }
          .page-box{
            width: 100% !important;
            box-sizing: border-box !important;
            padding: 15px 15px 15px 255px !important;
          }
        }
      }
    }
  }
  @media (max-width: 768px) {
    .header{
      &_main{
        padding: 10px 0 0;
        display: block;
        text-align: center;
        position: relative;
        .logo{
          display: inline-block;
          height: 40px;
          img{
            height: 100%;
          }
        }
        .nav{
          margin-top: 10px;
          background: var(--primary-color-1);
          display: block;
          .list{
            display: inline-block;
            li{
              float: left;
              a{
                color: var(--primary-color-7);
                font-size: 14px;
                line-height: 16px;
              }
              a.active:after{
                display: none;
              }
            }
          }
          .list:after{
            content: '';
            display: block;
            clear: both;
          }
        }
      }
    }
    .content{
      padding: 0;
      .container{
        .fixed{
          .mobileRoll{
            padding: 5px !important;
          }
          .mobileSidebar{
            display: none;
          }
          .show.mobileSidebar{
            display: block;
            position: fixed !important;
            width: auto !important;
            top: 0 !important;
            bottom: 0 !important;
            right: 0;
            background: rgba($color: #000, $alpha: 0.2);
            z-index: 1;
            padding: 0 !important;
            .sidebar-box{
              width: 240px !important;
              background: #fff;
              height: 100%;
              overflow: hidden !important;
              .sidebar-roll{
                width: 260px !important;
                overflow: auto !important;
                height: 100%;
                .sidebar-roll-mobile{
                  width: 240px;
                }
              }
            }
          }
          .page-box{
            padding: 15px 15px 15px 15px !important;
          }
        } 
      }
    }
    .layout.cb-icon-app{
      position: fixed;
      text-align: center;
      font-size: 20px;
      line-height: 40px;
      display: block;
      right: 30px;
      bottom: 100px;
      background: var(--primary-color-8);
      color: #fff;
      border-radius: 50%;
      width: 40px;
      height: 40px;
    }
  }
</style>